<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="jquery-1.11.1.min.js"></script>
    <script>
        $(function(){

            //获取所有的li元素，并给li元素设置鼠标移入事件
            $("li").mouseenter(function(){
                $(this).css("background","pink");

                //获取当前li元素以外的所有兄弟元素siblings("li")
                $(this).siblings("li").css("background","white");
            })

            $("ul").mouseleave(function(){
               /* $("li").css("background","white");*/
               $(this).children("li").css("background","white");
            })
        })
    </script>
</head>
<body>
<ul>
    <li>隔行变色，索引号为0</li>
    <li>隔行变色，索引号为1</li>
    <li>隔行变色，索引号为2</li>
    <li>隔行变色，索引号为3</li>
    <li>隔行变色，索引号为4</li>
    <li>隔行变色，索引号为5</li>
</ul>
</body>
</html>